<template>
	<view class="vue-uploader">
		<view @click="add" class="add">
			<progress :progress="percent" v-show="showProgress"></progress>
			<image src="/static/add.png" v-show="!showProgress" class="upload-icon"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-upload",
		data() {
			return {
				percent: 0,
				showProgress: false,
				status: 'ready',
				files: [],
				point: {},
				uploading: false
			};
		},
		methods: {
			add: function() {
				let ts = this;
				this.$emit('afterUpload', 'http://odmvison-media.oss-cn-shenzhen.aliyuncs.com/header/9fb371fbec1d3ddf6465f9f413bb09c8.jpg?x-oss-process=image/resize,h_500,w_500');
				return true;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: 'https://demo.hcoder.net/index.php?c=uperTest',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								name: tempFilePaths[0],
								key: "test/${filename}",
								policy: "",
								OSSAcessKeyId: "",
								success_action_status: "200",
								signature: ""
							},
							success: function(uploadFileRes) {
								console.log(uploadFileRes.data);
								//ts.$emit('afterUpload', url)
							}
						});

						uploadTask.onProgressUpdate(function(res) {
							ts.percent = res.progress;
							console.log('上传进度' + res.progress);
							console.log('已经上传的数据长度' + res.totalBytesSent);
							console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
						});
					},
					error: function(e) {
						console.log(e);
					}
				});
			}
		},
	}
</script>

<style>
	.vue-uploader {
		border: 1upx solid #e5e5e5;
		display: inline-block;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
	}

	.vue-uploader .add img {
		width: 100%;
		height: 100%;
		border: 1px solid #ececec;
	}

	.vue-uploader .add {
		width: 100%;
		height: 100%;
		cursor: pointer;
		text-align: center;
		font-size: 100%;
		cursor: pointer;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.upload-icon {
		width: 200upx;
		height: 200upx;
	}
</style>
